import React, { Component } from 'react'
import context from '../../context'
import './Item.css'
export default class Item extends Component {
  state = {
    xxx: '',
  }
  static contextType = context
  render() {
    // 解构props
    const {
      // 解构props.todo
      todo: { id, todoName, isDone },
    } = this.props

    const editId = this.context

    return (
      <li>
        {id !== editId ? (
          <label>
            <input
              type="checkbox"
              checked={isDone}
              onChange={(e) => {
                // 希望大家记住: 操作表单元素,虽然效果没有变化,但是在事件处理函数中可以获取到目标值
                // console.log(e.target.checked)
                this.props.updateTodo(id)
              }}
            />
            <span className={isDone ? 'done' : ''}>{todoName}</span>
          </label>
        ) : (
          // 这个input就是编辑的文本框
          <input
            type="text"
            value={this.state.xxx}
            onChange={(e) => {
              this.setState({
                xxx: e.target.value.trim(),
              })
            }}
            onKeyUp={(e) => {
              if (e.keyCode !== 13 || !this.state.xxx) return

              // 通知app组件,修改某个任务的todoName
              this.props.editTodoName(id, this.state.xxx)
              // 让app将editId修改为undefined
              this.props.setEditId(id !== editId ? id : undefined)
            }}
          />
        )}
        <button
          className="btn btn-danger"
          onClick={() => {
            if (confirm('确定要删除吗')) {
              this.props.delTodo(id)
            }
          }}
        >
          删除
        </button>
        <button
          className="btn btn-edit"
          onClick={() => {
            this.setState({
              xxx: todoName,
            })
            this.props.setEditId(id !== editId ? id : undefined)
          }}
        >
          {id !== editId ? '编辑' : '取消'}
        </button>
      </li>
    )
  }
}
